<template>
  <div class="login-container">
    <van-nav-bar title="登录">
      <template #left>
        <img src="@/assets/image/logo.png" alt="" width="100">
      </template>
    </van-nav-bar>
    <!-- 手机号验证码表单 -->
    <!-- submit是提交事件，如果每个表单项都有一个rules属性，只有对每个表单项进行校验才会触发提交事件 -->
    <!-- v-model收集输入框的值，建议取名的时候与后台接口参数名保持一致 -->
    <van-form @submit="handlerLogin">
      <!-- 只有通过rules规则校验才会提交 -->
      <van-field
        label="手机号"
        placeholder="手机号"
        :rules="[{ required: true, message: '请填写手机号' },
        {pattern:/^1[3-9]\d{9}$/,message:'请输入正确格式手机号'}]"
        v-model="loginForm.mobile"
      />
      <van-field
        label="验证码"
        placeholder="验证码"
        :rules="[{ required: true, message: '请填写验证码' },
        {pattern:/^\d{6}$/,message:'请输入正确验证码'}]"
        v-model="loginForm.code"
      />
      <div style="margin: 16px;">
        <van-button
        round
        block
        type="info"
        native-type="submit"
        :loading="loading"
        loading-text="登录中">登录</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
export default {
  name: 'LoginVue',
  data () {
    return {
      loginForm: {
        mobile: '18895862984', // 手机号，取这个名字为了和后台保持一致
        code: '246810'// 验证码
      },
      loading: false
    }
  },
  methods: {
    ...mapActions('user', ['LoginAction']),
    // try-catch -finally是js中捕获错误的语法
    // 把可能出错的代码放到try语句块中
    // 如果代码没问题则正常执行try语句块中的代码
    // 如果有错，try中后续代码停止执行，跳转到catch语句块中，执行catch中的代码,catch(err),err是此次错误对象，记录了此次错误的原因
    async handlerLogin () {
      try {
        // 发请求把按钮改为加载中状态
        this.loading = true
        // 调接口,发请求
        await this.LoginAction(this.loginForm)
        // 登录成功提示
        this.$toast.success('登录成功')
        // 跳转至首页，不可以回退
        this.$router.replace('/layout/home')
      } catch (err) {
        // 登录失败提示
        this.$toast.fail('登录失败')
        console.log(err)
      } finally {
        // 请求结束后把按钮改为正常状态
        this.loading = false
      }
    }
  }
}
</script>

<style scoped>

</style>
